
import React,{useRef,useEffect,useState} from "react";

let hooks,ref;

 const RefUse = ()=>{
     /*
     *
     * 从这个例子可以看出 createRef每次都是一个新的 引用
     * useRef 始终只有一个实例
     * */
     const iptRef = useRef();
     const iptRef2 = React.createRef();
     const [count,setCount] = useState(1)
     console.log(hooks === iptRef);
     console.log(ref === iptRef2);
     hooks = iptRef;
     ref = iptRef2;
     /**
      * useEffect
      * 第一个参数是回调函数，组件第一次加载必定会执行， deps里面的数据变化之后也会触发
      * 第二个参数是需要监听的数据
      */
       useEffect(()=>{
           console.log("useEffect执行")
           console.log(iptRef.current.value)
       },[])
     const handleFocus = ()=>{
         // iptRef.current.focus()
         setCount(count + 1)
     }
    return (
        <div>
            <input defaultValue={'666'} ref={iptRef} type="text"/>
            <input ref={iptRef2} type="text"/>
            <button onClick={handleFocus}>點我啊</button>
            {
                count
            }
        </div>
    )

}

export default RefUse;